<template>
  <div class="bg-white dark:bg-gray-800 grid grid-rows-2 grid-cols-1 gap-4 md:grid-cols-2 md:grid-rows-1 h-screen">
    <div class="flex justify-center flex-col p-10 min-h-52">
      <div class="text-2xl font-bold font-sans text-left dark:text-white">登录</div>
      <span class="text-sm mt-3 mb-3">❥❥❥❥❥❥❥❥</span>
      <n-card>
        <n-space>
          <n-button @click="themeStore.setTheme('dark')">深色</n-button>
          <n-button @click="themeStore.setTheme()">浅色</n-button>
          <n-button @click="login">登录</n-button>
        </n-space>
      </n-card>
    </div>
    <div
        class="rounded-md flex items-center justify-center text-2xl font-extrabold overflow-hidden"
    >
      <img src="../assets/images/img-signin.jpg" class="max-h-full max-w-full"/>
    </div>
  </div>
</template>

<script setup lang="ts">
const themeStore = useThemeStore();
const router = useRouter();
const message = useMessage();
const userStore = useUserStore();
const login = async () => {
  await userStore.login({
    username: 'zyh',
    password: 12,
    token: 12,
    avatar: 'https://tupian.qqw21.com/article/UploadPic/2022-3/202231521561454865.jpg',
  });
  message.success('登录成功，即将进入系统');
  await router.replace('/');
}
</script>

<style lang="scss">

</style>
